<template>
  <div class="form-wrapper border">
    <!-- <div class="top">
      <Button @click="handleSave" :loading="saving" class="save-btn" type="primary">
        <span v-if="!loading">保存</span>
        <span v-else>保存中...</span>
      </Button>
    </div>-->
    <!-- <h4 class="form-title">当前组件类型为{{curType}}</h4> -->
    <Form ref="fieldForm" :rules="ruleValidate" :model="field">
      <Divider orientation="left">常用属性</Divider>
      <FormItem label="标题" prop="title">
        <Input
          :maxlength="maxlength"
          @on-change="handleBasicChange('title')"
          v-model="basicProps.title"
        />
      </FormItem>

      <FormItem label="描述">
        <Input
          :maxlength="maxlength"
          v-model="basicProps.placeholder"
          @on-change="handleBasicChange('placeholder')"
        />
      </FormItem>

      <FormItem label="是否必填">
        <i-switch v-model="basicProps.required" @on-change="handleBasicChange('required')"/>
      </FormItem>

      <FormItem label="是否单列">
        <i-switch @on-change="handleBasicChange('single')" v-model="basicProps.single"/>
      </FormItem>

      <FormItem label="最大长度">
        <Input v-model="basicProps.max" @on-change="handleBasicChange('max')"/>
      </FormItem>

      <FormItem label="最小长度">
        <Input v-model="basicProps.min" @on-change="handleBasicChange('min')"/>
      </FormItem>

      <Divider orientation="left">props</Divider>
      <slot name="fieldProps"></slot>
      <Divider orientation="left">扩展</Divider>
      <FormItem label="编辑时禁用">
        <i-switch @on-change="handleBasicChange('editReadonly')" v-model="basicProps.editReadonly"/>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import Emitter from '../../../../mixins/emitter';

export default {
  name: 'fieldSetting',
  mixins: [Emitter],
  data() {
    return {
      maxlength: 50,
      basicProps: {
        title: '',
        placeholder: '',
        single: true,
        required: false,
        max: '',
        min: '',
        editReadonly: false
      },
      ruleValidate: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  props: {
    field: {
      type: Object,
      default: () => {
        return {};
      }
    },
    onSave: {
      type: Function
    }
  },
  methods: {
    handleBasicChange(name) {
      let field = {};
      const {
        title,
        placeholder,
        single,
        required,
        max,
        min
      } = this.basicProps;

      switch (name) {
        case 'title':
          field = { title };
          break;
        case 'placeholder':
          field = { props: { placeholder } };
          break;
        case 'required':
          {
            let message = `请输入${this.field.title}`;
            if (this.field.field_type === 'select') {
              message = `请选择${this.field.title}`;
            }
            field = {
              name: 'required',
              validate: {
                required: required ? 1 : 0,
                message
              }
            };
          }
          break;
        case 'max':
          if (max) {
            field = {
              name: 'max',
              validate: {
                max: Number(max),
                message: `${this.field.title}长度最大为${max}`
              }
            };
          }
          break;
        case 'min':
          if (min) {
            field = {
              name: 'min',
              validate: {
                min: Number(min),
                message: `${this.field.title}长度最小为${min}`
              }
            };
          }
          break;
        case 'single':
          field = { style: { single: single ? 1 : 0 } };
          break;
        case 'editReadonly':
          field = {
            ext: { editReadonly: this.basicProps.editReadonly ? 1 : 0 }
          };
          break;
      }
      this.dispatch('formFieldsSetting', 'on-change-field', field);
    },
    getValidate(validateName) {
      if (!Array.isArray(this.field.validate)) {
        return {};
      }
      return (
        this.field.validate.find(v => {
          return Object.keys(v).includes(validateName) && v[validateName];
        }) || {}
      );
    },
    init() {
      let { props, title, style, ext } = this.field;
      const requiredValidate = this.getValidate('required');

      if (!ext) {
        ext = {};
      }

      this.basicProps = {
        title: title,
        placeholder: props.placeholder || '',
        single: style.single == 1,
        max: this.getValidate('max').max || '',
        min: this.getValidate('min').min || '',
        required: requiredValidate.required == 1,
        editReadonly: ext.editReadonly == 1
      };
    }
  },
  created() {
    this.init();
  },
  watch: {
    field: {
      handler() {
        this.init();
      },
      deep: true
    }
  }
};
</script>

<style>
</style>
